<template>
  <app-bento-item
    title="资产安全态势"
    :style="`grid-column: span 1; background: linear-gradient(135deg, #2962FF 0%, #2962FF80 100%)`"
  >
    <div class="security-stats">
      <div class="asset-id">
        <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
          <path
            fill="currentColor"
            d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7C14.1,7.7 15.8,9.4 15.8,11.5C15.8,13.6 14.1,15.3 12,15.3C9.9,15.3 8.2,13.6 8.2,11.5C8.2,9.4 9.9,7.7 12,7.7M7,17V18H17V17C17,15.9 16.1,15 15,15H9C7.9,15 7,15.9 7,17Z"
          />
        </svg>
        <span class="label">资产ID</span>
        <div class="value">{{ assetId }}</div>
      </div>

      <div class="asset-name">
        <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
          <path
            fill="currentColor"
            d="M12,3L2,12H5V20H19V12H22L12,3M12,8A3,3 0 0,1 15,11A3,3 0 0,1 12,14A3,3 0 0,1 9,11A3,3 0 0,1 12,8M12,16C13.1,16 14,16.9 14,18V20H10V18C10,16.9 10.9,16 12,16Z"
          />
        </svg>
        <span class="label">资产名称</span>
        <div class="value">{{ assetName }}</div>
      </div>

      <div class="event-count">
        <div class="count-display">{{ eventCount }}</div>
        <div class="count-label">总安全事件</div>
      </div>

      <div class="timeline">
        <div class="timeline-item">
          <svg class="icon" viewBox="0 0 24 24" width="20" height="20">
            <path
              fill="currentColor"
              d="M11,7V12.11L15.71,14.9L16.5,13.62L12.5,11.25V7M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"
            />
          </svg>
          <span>首次告警: {{ firstAlert }}</span>
        </div>
        <div class="timeline-item">
          <svg class="icon" viewBox="0 0 24 24" width="20" height="20">
            <path
              fill="currentColor"
              d="M11,7V12.11L15.71,14.9L16.5,13.62L12.5,11.25V7M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
            />
          </svg>
          <span>最新告警: {{ lastAlert }}</span>
        </div>
      </div>
    </div>
  </app-bento-item>
</template>

<script setup>
const assetId = '0fd4b9d96d6f5ecab6c6a8b6809f5ae3'
const assetName = 'taomingwei-node3-ubuntu'
const eventCount = '13'
const firstAlert = '2022-04-03 09:52'
const lastAlert = '2025-04-08 09:12'
</script>

<style lang="scss" scoped>
.security-stats {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1.5rem;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.1;
    pointer-events: none;
  }
}

.asset-id,
.asset-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  .icon {
    flex-shrink: 0;
    color: #00e676;
  }

  .label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
  }

  .value {
    margin-left: auto;
    font-family: monospace;
    font-size: 14px;
    color: white;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
  }
}

.event-count {
  text-align: center;
  margin: 1rem 0;

  .count-display {
    font-size: 48px;
    font-weight: 700;
    color: white;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }

  .count-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
  }
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  .timeline-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);

    .icon {
      color: #ff4081;
    }
  }
}
</style>
